<template>
    <div>
        <Row class="btn-action">
            <Col span="24">
                <Button type="primary" class="mp10" @click="saveMessage">新增</Button>
            </Col>
        </Row>
        <div class="opt-area-02">
            <div class="right-con">
                <div class="input-frame">
                    <Input type="text" placeholder="请输入单位名称" v-model="params.company_name"
                           icon="ios-search" @on-click="selectlist"/>
                </div>
                <div class="input-frame">
                    <Input type="date"  placeholder="请输入日期" v-model="params.date"
                           icon="ios-search" @on-click="selectlist"/>
                </div>
            </div>
        </div>
        <div>
            <template>
                <Table border :columns="columns" :data="dataList" :loading="ListLoading">
                    <template slot-scope="{ row }" slot="state">
                        <div v-if="row.state==='0'">未审核</div>
                        <div v-if="row.state==='1'">已审核</div>
                    </template>
                    <template  slot-scope="{ row }" slot="action">
                        <Button v-if="row.state==='0'" type="success" size="small" style="margin-right: 5px" @click="updateState(row)">审核</Button>
                        <Button type="primary" size="small" style="margin-right: 5px"  @click="updateMessage(row)">编辑</Button>
                        <Button type="error" size="small" @click="deleteMessage(row)">删除</Button>
                    </template>
                </Table>
            </template>
        </div>
        <div class="bottom">
            <template>
                <Page :total="params.totalRecord" @on-change="pageAction"/>
            </template>
        </div>
        <Modal
                v-model="deleteModal"
                title="提示"
                @on-ok="deleteok">
            <p>是否删除信息！</p>
        </Modal>
        <Modal
                v-model="saveModal"
                title="新增"
                @on-ok="addok">
            <template>
                <Form :model="formItem" :label-width="120">
                    <FormItem label="日期：">
                        <Row>
                            <DatePicker format="yyyy-MM-dd" type="date" placeholder="Select date" v-model="formItem.date"></DatePicker>
                        </Row>
                    </FormItem>
                    <FormItem label="分布情况_和平">
                        <Input v-model="formItem.fbqk_heping" placeholder="请输入"></Input>
                    </FormItem>
                    <FormItem label="分布情况_沈河">
                        <Input v-model="formItem.fbqk_shenhe" placeholder="请输入"></Input>
                    </FormItem>
                    <FormItem label="分布情况_铁西">
                        <Input v-model="formItem.fbqk_tiexi" placeholder="请输入"></Input>
                    </FormItem>
                    <FormItem label="分布情况_皇姑">
                        <Input v-model="formItem.fbqk_huanggu" placeholder="请输入"></Input>
                    </FormItem>
                    <FormItem label="分布情况_大东">
                        <Input v-model="formItem.fbqk_dadong" placeholder="请输入"></Input>
                    </FormItem>
                    <FormItem label="分布情况_浑南">
                        <Input v-model="formItem.fbqk_hunnan" placeholder="请输入"></Input>
                    </FormItem>
                    <FormItem label="分布情况_于洪">
                        <Input v-model="formItem.fbqk_yuhong" placeholder="请输入"></Input>
                    </FormItem>
                    <FormItem label="分布情况_沈北">
                        <Input v-model="formItem.fbqk_shenbei" placeholder="请输入"></Input>
                    </FormItem>
                    <FormItem label="分布情况_苏家屯">
                        <Input v-model="formItem.fbqk_sujiatun" placeholder="请输入"></Input>
                    </FormItem>
                    <FormItem label="分布情况_辽中">
                        <Input v-model="formItem.fbqk_liaozhong" placeholder="请输入"></Input>
                    </FormItem>
                    <FormItem label="分布情况_新民">
                        <Input v-model="formItem.fbqk_xinmin" placeholder="请输入"></Input>
                    </FormItem>
                    <FormItem label="分布情况_法库">
                        <Input v-model="formItem.fbqk_faku" placeholder="请输入"></Input>
                    </FormItem>
                    <FormItem label="分布情况_康平">
                        <Input v-model="formItem.fbqk_kangping" placeholder="请输入"></Input>
                    </FormItem>
                </Form>
            </template>
        </Modal>
    </div>
</template>

<script>
import { getEpidemicDistributionFourList, deleteEDFour,
  updateEDFourState,
  saveEDFour } from '@/api/yi-qing'

export default {
  name: 'index',
  data () {
    return {
      params: { company_name: '', date: '', pageNo: 1, pageSize: 10, totalRecord: 0 },
      columns: [
        {
          title: '单位编码',
          key: 'company_code',
          fixed: 'left',
          width: 100
        },
        {
          title: '单位名称',
          key: 'company_name',
          fixed: 'left',
          width: 100
        },
        {
          title: '日期',
          key: 'date',
          fixed: 'left',
          width: 110
        },
        {
          title: '状态',
          slot: 'state',
          fixed: 'left',
          width: 100
        },
        {
          title: '分布情况_和平',
          key: 'fbqk_heping',
          width: 100
        },
        {
          title: '分布情况_沈河',
          key: 'fbqk_shenhe',
          width: 100
        },
        {
          title: '分布情况_铁西',
          key: 'fbqk_tiexi',
          width: 100
        },
        {
          title: '分布情况_皇姑',
          key: 'fbqk_huanggu',
          width: 100
        },
        {
          title: '分布情况_大东',
          key: 'fbqk_dadong',
          width: 100
        },
        {
          title: '分布情况_浑南',
          key: 'fbqk_hunnan',
          width: 100
        },
        {
          title: '分布情况_于洪',
          key: 'fbqk_yuhong',
          width: 100
        },
        {
          title: '分布情况_沈北',
          key: 'fbqk_shenbei',
          width: 100
        },
        {
          title: '分布情况_苏家屯',
          key: 'fbqk_sujiatun',
          width: 100
        },
        {
          title: '分布情况_辽中',
          key: 'fbqk_liaozhong',
          width: 100
        },
        {
          title: '分布情况_新民',
          key: 'fbqk_xinmin',
          width: 100
        },
        {
          title: '分布情况_法库',
          key: 'fbqk_faku',
          width: 100
        },
        {
          title: '分布情况_康平',
          key: 'fbqk_kangping',
          width: 100
        },
        {
          title: '操作',
          slot: 'action',
          width: 250,
          align: 'center',
          fixed: 'right'
        }
      ],
      dataList: [],
      ListLoading: false,
      deleteModal: false,
      saveModal: false,
      row: {},
      formItem: {}
    }
  },
  methods: {
    init () {
      this.ListLoading = true
      let data = this.params
      getEpidemicDistributionFourList(data).then(ret => {
        if (ret.data.errcode === 0) {
          // this.params.totalRecord
          this.dataList = ret.data.data.results
          this.dataList.forEach((item, index) => {
            this.dateChange(item.date, index)
          })
          this.params.totalRecord = ret.data.data.totalRecord
          this.ListLoading = false
        }
      })
    },
    pageAction (page) {
      this.params.pageNo = page
      this.init()
    },
    dateChange (obj, index) {
      var time = new Date(obj)
      var y = time.getFullYear()
      var m = time.getMonth() + 1
      var d = time.getDate()
      this.dataList[index].date = y + '-' + m + '-' + d
    },
    dateZh (value) {
      var time = new Date(value)
      var y = time.getFullYear()
      var m = time.getMonth() + 1
      var d = time.getDate()
      this.formItem.date = y + '-' + m + '-' + d
    },
    updateState (obj) {
      updateEDFourState(obj).then(ret => {
        if (ret.data.errcode === 0) {
          this.init()
        }
      })
    },
    selectlist () {
      this.params.pageNo = 1
      this.init()
    },
    deleteMessage (obj) {
      this.deleteModal = true
      this.row = obj
    },
    deleteok () {
      deleteEDFour(this.row).then(ret => {
        if (ret.data.errcode === 0) {
          this.init()
        }
      })
    },
    saveMessage () {
      this.saveModal = true
    },
    updateMessage (obj) {
      this.formItem = this.$common.xeUtils.clone(obj)
      this.saveModal = true
    },
    addok () {
      if (this.formItem.date === '' || this.formItem.date === undefined) {
        this.$Message.info('请输入日期！')
      } else {
        this.dateZh(this.formItem.date)
        saveEDFour(this.formItem).then(ret => {
          if (ret.data.errcode === 0) {
            this.init()
          }
        })
      }
    }
  },
  mounted () {
    this.init()
  },
  watch: {
    saveModal (saveModal) {
      if (saveModal === false) {
        this.formItem = {}
      }
    }
  }

}
</script>

<style scoped>
    .bottom{
        margin-top: 20px;
    }
    .btn-action {
        margin-bottom: 10px;
    }
    .opt-area-02 {
        display: flex;
        align-items: center;
        flex-direction: column;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .opt-area-02 .right-con {
        width: 100%;
        margin-top: 5px;
        display: flex;
    }

    .opt-area-02 .left-con {
        font-size: 14px;
        width: 100%;
    }

    .opt-area-02 .left-con span {
        font-weight: bold;
    }

    .opt-area-02 .right-con input {
        width: 150px;
        margin-right: 10px;
    }

    .opt-area-02 .right-con .input-frame {
        width: 200px;
        margin-right: 10px;
    }
    .mp10 {
        margin-right: 10px;
    }
</style>
